<template>
<section :class='common-text-block-section'>
<section class="upload-file-section">
        <div class="form-item">
            <div class="el-upload-dragger" id="header-radio">
                    <div class="el-upload__tip">
                      1. 请将您的客户信息按照模板Excel整理后上传至下方接口;<br>
                      2. 点击链接下载 <br>
                      3. 请务必保证录入信息正确，录入信息错误将会导致报税等流程受阻; 若后期发现录入信息有误，可在【客户建档】主页面进行更改
                      </div> 
            </div>
            <el-upload
                ref="baseInfo"
                drag
                accept=".xlsx,.xls"
                action="/batchInput/uploadBaseInfo"
                 :before-remove="handleRemove"
                :data="{key: 'baseInfo'}"
                :http-request="uploadFile"
                multiple
                id="bankupload">
                <i class="el-icon-upload" id="bankicon"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        <div>
        </div>
        </div>
</section>
</section>
</template>
<script>
import 'element-ui/lib/theme-chalk/upload.css';
import utiles from '@/components/utiles';

export default {
    props: {
        clientInfo: {
            type: Object,
            default: null
        },
    },
    components: {
    },
    data() {
        return {
            baseInfoFileId: 0,
            uidFileidMap: {},
            typeMap:{
                "invoice": 0,
                "bankSlip": 1,
                "specInvoice":2
            },
            banktype:1,
            uploadBankFinished: false
            
        };
    },
    methods: {
        
        /**
         * 上传文件，当一次性选择多个文件时，会分多次上传
         *
         * @param {Object} fileData 文件数据
         */
        uploadFile(fileData) {
            const formData = new FormData();
            const currentUser = utiles.getCurrentUser();
            formData.append('file', fileData.file);
            formData.append('fileName', fileData.file.name)
            // formData.append('bName', currentUser.bCompanyName);
            this.$http.post(
                fileData.action,
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
            ).then(res => {
                if (res.code == 0) {
                    this.baseInfoFileId = res.data.fileId;
                    //
                    this.uidFileidMap[fileData.file.uid] = {fileId:res.data.fileId, key:fileData.data.key}
                }
                else {
                    this.$message.error(`${fileData.file.name}上传失败`);
                    const uploadFiles = this.$refs[fileData.data.key].uploadFiles;
                    const index = uploadFiles.findIndex(item => item.uid === fileData.uid);
                    uploadFiles.splice(index, 1);
                }
            });
        },
        handleRemove(file, fileList){
            const deleteApi = "/upload/deleteBaseInfo";
            const {fileId: fileId, key: key} = this.uidFileidMap[file.uid]
            const params ={fileId:fileId,
                    companyName: this.clientInfo.companyName,
                    };
            // uploadFiles.splice(index, 1);
            this.$http.get(deleteApi, {params: params}).then(res => {
                if (res.code == 0) {
                    const index = this[`${key}FileIds`].findIndex(item => item == fileId);
                    this[`${key}FileIds`].splice(index, 1)
                    return true;
                }
                else {
                    this.$message.error(`${file.name}删除失败`);
                    return false;
                    // 从列表中删除上传失败的文件
                }
            })
        },
        getValue() {
        return {
                fileId: this.baseInfoFileId,
        };
        },
        getUploadFinished(uploadFinished) {
            this.uploadBankFinished = uploadFinished;
            console.log("uploadBankFinished", this.uploadBankFinished)
            this.$emit("uploadBankFinished", this.uploadBankFinished);
            this.uploadBankFinished = false;
        }
    },
    watch:{
        banktype(newValue, oldValue){
            if (newValue == 1){
                this.uploadBankFinished = false;
                this.$emit("uploadBankFinished", this.uploadBankFinished);
            }else {
                this.uploadBankFinished = true;
                this.$emit("uploadBankFinished", this.uploadBankFinished);
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import '../../../assets/var.less';
.upload-file-section {
    width: 800px;
    display: flex;
    padding: 20px 20px 20px 0;
    .form-item ~ .form-item {
        margin-left: 20px;
    }
    .title-section {
        margin: 0 0 10px 0;
        padding-bottom: 10px;
        line-height: 1.5em;
    }
    .upload-item {
        display: inline-block;
    }
}
// #bankicon{
//     margin-top:0;
// }

// /deep/ 可以不必是父子组件关系
#bankupload /deep/ .el-upload{
    height: 100px;
    width: 100%;
}
#bankupload /deep/ .el-upload-dragger{
    height: 215px;
    width: 100%;
}

.form-item{
    width:100%;
}
.form-item #header-radio{
    width: 100%;
    height: 80px;
    padding-bottom: 20px;
    padding-left:10px;
    .el-upload__tip{
        text-align: left;
    }
}
// .single-line {
//     padding: 5px 0;
//     display: flex;
//     > label {
//         flex: 0 0 100px;
//         &::before {
//             margin-right: 5px;
//         }
//     }
//     > span {
//         flex: 0 0 60px;
//         font-size: 14px;
//         line-height: 26px;
//         &.bank {
//             // color: @color-error;
//         }
//         &.uploaded {
//             color: @color-green;
//         }
//     }
// }
</style>